<template class="a">
	<div class="beijing">
  <h2 class="text">关于我们 联系我们</h2>
  <div class="container" >
	<div v-for="index in de" :key="index.id" >
	  <div class="box">
		  <!-- <img :src="index.img" /> -->
		  <p>{{index.name}}</p>
	     <!-- <p>{{index.time}}</p> -->
	    <p>{{index.dizhi}}</p>
	  </div>
	</div>
  </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
	const de = ref([
		{
			id: 1,
			name: "关于我们",
			dizhi: "我们是一个充满激情和创造力的团队，致力于为用户提供优质的产品和服务。",
		},
		{
			id: 2,
			name: "我们的团队",
			dizhi: "我们的团队由一群经验丰富、专业技能扎实的人才组成。他们来自不同的领域，拥有独特的视角和创新的思维。",
		},
		{
			id: 3,
			name: "开发团队",
			dizhi: "我们的开发团队精通各种前端和后端技术，能够打造出高效、稳定的网站和应用程序。他们不断追求技术的进步，以确保我们的产品始终处于行业领先地位。",
		},
		{
			id: 4,
			name: "设计团队",
			dizhi: "我们的设计团队具有敏锐的审美眼光和出色的设计能力。他们致力于为用户创造美观、易用的界面，提升用户体验。",
		},
		{
			id: 5,
			name: "营销团队",
			dizhi: "我们的营销团队善于分析市场趋势和用户需求，制定有效的营销策略，推广我们的产品和服务。",
		},
		{
			id: 6,
			name: "我们的使命",
			dizhi: "我们的使命是通过创新的技术和优质的服务，为用户创造价值，推动行业的发展。",
		},
		{
			id: 6,
			name: "我们的愿景",
			dizhi: "我们的愿景是成为行业的领导者，为用户提供最优质的产品和服务，打造一个更加美好的世界。",
		},
		{
			id: 6,
			name: "联系我们",
			dizhi: "如果您有任何问题或建议，请随时联系我们。电子邮件：info@example.com 电话：+1234567890 地址：123 Main Street, Anytown, USA",
		},
		
	])
</script>
<style>
.text{text-align: center;}
.box{
    /* background-color: #9e473b;设置每个网格项的背景颜色 */
    /* color: white; /* 设置文字颜色 */ 
    padding: 20px; 
	/* 设置内边距 */
    text-align: center; 
	
	/* 文字居中 */
    /* font-size: 20px;
	/* 设置字体大小
	/* width: 200px;
	height: 200px; */
}
.beijing{
	background-image: url(/public/beijing.webp);
}

/* .container{ */
	/* background-image: url(/public/bei3.png); */
	/* background-repeat: no-repeat; */
	/* background-color: #642016; */
    /* display: grid; */
    /* grid-template-columns: repeat(3, 1fr); */
    /* grid-template-rows: repeat(3, 1fr); */ 
    /* gap: 50px; /* 设置网格之间的间距 */ 
/* } */

</style>
<!-- 
	<div class="beijing">
		<div class="about-us-page">
		    <h1>关于我们</h1>
		    <p>我们是一个充满激情和创造力的团队，致力于为用户提供优质的产品和服务。</p> -->
		   <!-- <div class="team-section">
		      <h2>我们的团队</h2>
		      <p>我们的团队由一群经验丰富、专业技能扎实的人才组成。他们来自不同的领域，拥有独特的视角和创新的思维。</p>
		      <ul>
		        <li>
		          <h3>开发团队</h3>
		          <p>我们的开发团队精通各种前端和后端技术，能够打造出高效、稳定的网站和应用程序。他们不断追求技术的进步，以确保我们的产品始终处于行业领先地位。</p>
		        </li>
		        <li>
		          <h3>设计团队</h3>
		          <p>我们的设计团队具有敏锐的审美眼光和出色的设计能力。他们致力于为用户创造美观、易用的界面，提升用户体验。</p>
		        </li>
		        <li>
		          <h3>营销团队</h3>
		          <p>我们的营销团队善于分析市场趋势和用户需求，制定有效的营销策略，推广我们的产品和服务。他们与用户保持密切的沟通，不断改进我们的产品，以满足用户的期望。</p>
		        </li>
		      </ul>
		    </div>
		    <div class="mission-section">
		      <h2>我们的使命</h2>
		      <p>我们的使命是通过创新的技术和优质的服务，为用户创造价值，推动行业的发展。</p>
		    </div>
		    <div class="vision-section">
		      <h2>我们的愿景</h2>
		      <p>我们的愿景是成为行业的领导者，为用户提供最优质的产品和服务，打造一个更加美好的世界。</p>
		    </div>
		    <div class="contact-section">
		      <h2>联系我们</h2>
		      <p>如果您有任何问题或建议，请随时联系我们。</p>
		      <ul>
		        <li>电子邮件：info@example.com</li>
		        <li>电话：+1234567890</li>
		        <li>地址：123 Main Street, Anytown, USA</li>
		      </ul>
		    </div>
		  </div>
	</div> -->





	<!-- /* .about-us-page {
	  padding: 20px;
	}
	h1 {
	  font-size: 32px;
	  margin-bottom: 20px;
	}
	p {
	  font-size: 16px;
	  line-height: 1.5;
	  margin-bottom: 10px;
	}
	ul {
	  list-style: none;
	  padding: 0;
	}
	li {
	  margin-bottom: 20px;
	}
	h2 {
	  font-size: 24px;
	  margin-bottom: 10px;
	}
	h3 {
	  font-size: 18px;
	  margin-bottom: 10px;
	} */
	/* .beijing{
		background-image: url(/public/bj.jpg);
		opacity: 0.7;
	} */
	/* .beijing {
	  position: relative;
	}
	.beijing::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: url(/public/bj.jpg) no-repeat center center fixed;
	  background-size: cover;
	  /* 使用 filter 设置透明度 */
	  /* filter: opacity(0.5); */
	/* } */ --> 
